<script>
import { codemirror, CodeMirror } from 'vue-codemirror'
import 'codemirror/mode/sql/sql.js'; // SQL mode for syntax highlighting
import 'codemirror/lib/codemirror.css'
import { filterObj } from '@/utils/util'
import { postAction } from '@api/manage'
import JCodeEditor from '@/components/jeecg/JCodeEditor'
export default ({
  components: { codemirror,JCodeEditor },
  data(){
    return {
      title: "源表信息",
      width:1600,
      visible: false,
      tableId: '',
      ddl: '',
      url: {
        ddlInfo: '/dcloud-platform/api/datalibLogicTable/v1/innerTableInfo',
      }
    }
  },
  methods:{
    handleOk(){
      this.close()
    },
    handleCancel(){
      this.close()
    },
    close () {
      this.visible = false;
    },
    open(record){
      this.tableId = record.id;
      this.visible = true;
      this.formatSql()
    },
    formatSql(){
      let params = {}
      params['tableId'] = this.tableId;
      postAction(this.url.ddlInfo, params)
        .then(res => {
          if (res.success) {
            this.ddl = res.result

          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
        })
    }
  }
})
</script>

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="取消">
    <j-code-editor
      language="sql"
      :value="ddl"
      :fullScreen="true"
      style="min-height: 100px"/>
  </j-modal>

</template>

<style scoped>

</style>